<template>
  <el-dialog :visible="showdialog"
             width="410px"
             @close="btnCancel">
    <div slot="title">
      <i class="big big-tishiicon"></i>
      <span class="title-text">添加分类</span>
    </div>
    <el-form ref="fromData"
             :model="fromData"
             :rules="rules">
      <el-form-item label="分类名称"
                    prop="cate_name">
        <el-input v-model="fromData.cate_name"
                  placeholder="请输入名称"
                  autocomplete="off"
                  style="width: 60%"></el-input>
      </el-form-item>
      <el-form-item label="分类别名"
                    prop="cate_alias">
        <el-input v-model="fromData.cate_alias"
                  placeholder="请输入别名"
                  autocomplete="off"
                  style="width: 60%"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="btnCancel">取 消</el-button>
      <el-button type="primary"
                 @click="btnOK">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addArtCate } from '@/api/article'
export default {
  props: {
    showdialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fromData: {
        cate_name: '',
        cate_alias: ''
      },
      rules: {
        cate_name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }, { min: 1, max: 10, message: '分类名称长度为1-10', trigger: 'blur' }],
        cate_alias: [{ required: true, message: '分类别名不能为空', trigger: 'blur' }, { min: 1, max: 16, message: '分类别名长度为1-16', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async btnOK () {
      try {
        await this.$refs.fromData.validate()
        console.log(this.fromData)
        await addArtCate(this.fromData)
        // this.$parent.getArtCate()
        // this.$parent.showdialog = false
        this.$emit('getArtCate')
        this.$emit('update:showdialog', false)
      } catch (err) {
        console.log(err)
      }
    },
    async btnCancel () {
      this.fromData = {
        cate_name: '',
        cate_alias: ''
      }
      this.$refs.fromData.resetFields()
      this.$emit('update:showdialog', false)
    }
  }
}
</script>

<style>
.el-dialog {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.big {
  color: #4f81ff;
}
</style>
